import React from 'react'
import './index.less'
import { TabBar } from 'antd-mobile'
import { useNavigate, useLocation  } from 'umi'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import Icon from '../Icon/Icon'
export default function MyTabbar() {
  const navigate = useNavigate();
  const location = useLocation();
  const tabs = [
    {
      key: '/home',
      title: (active: boolean) => (
        active? <span style={{color: '#e93323'}}>首页</span>: <span>首页</span>
      ),
      icon: (active: boolean) => (
        <Icon name="shouye1" size={22} color={active?'#e93323': '#333'}/>
      )
    },
    {
      key: '/cate',
      title: (active: boolean) => (
        active? <span style={{color: '#e93323'}}>分类</span>: <span>分类</span>
      ),
      icon: (active: boolean) => (
        <Icon name="fenlei" size={22} color={active?'#e93323': '#333'}/>
      )
    },
    {
      key: '/cart',
      title: (active: boolean) => (
        active? <span style={{color: '#e93323'}}>购物车</span>: <span>购物车</span>
      ),
      icon: (active: boolean) => (
        <Icon name="gouwuche" size={22} color={active?'#e93323': '#333'}/>
      )
    },
    {
      key: '/user',
      title: (active: boolean) => (
        active? <span style={{color: '#e93323'}}>我的</span>: <span>我的</span>
      ),
      icon: (active: boolean) => (
        <Icon name="wode" size={22} color={active?'#e93323': '#333'}/>
      )
    },
  ]
  const swicthTab = (key:string) => {
    navigate(key)
  }
  return (
    <div className='tabbar'>
      <TabBar
        onChange={
          swicthTab
        } 
        activeKey={location.pathname}>
        {
        
          tabs.map(tab => (
            <TabBar.Item key={tab.key} icon={tab.icon} title={tab.title}/>
          ))
        }
      </TabBar>
    </div>
  )
}
